<template>
    <div class="animation-menu-box">
        <div class="btn-create" @click="createTemplate">创建动画</div>
        <div class="animation-content-menu">
            <div
                :class="['animation-menu-item', active === 'template' ? 'active' : '']"
                @click="$emit('change', 'template')"
            >全部项目</div>
            <div
                :class="['animation-menu-item', active === 'media' ? 'active' : '']"
                @click="$emit('change', 'media')"
            >我的素材</div>
            <div
                :class="['animation-menu-item', active === 'video' ? 'active' : '']"
                @click="$emit('change', 'video')"
            >我的视频</div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        active: {
            type: String,
            default: 'template',
        },
    },
    methods: {
        createTemplate() {
            this.$store.commit('RESET_CONFIG');
            this.$router.push({path: '/build'});
        }
    }
}
</script>

<style lang="less" scoped>
.animation-menu-box {
    padding: 12px 24px;
    position: relative;
    text-align: center;
    height: 100%;
    &::after {
        content: ' ';
        width: 1px;
        transform: scaleX(0.2);
        background: #D3D3D3;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
    }
    .btn-create {
        padding: 8px 12px;
        background: #0099ff;
        color: #FFF;
        font-size: 14px;
        border-radius: 4px;
    }
    .animation-content-menu {
        margin-top: 24px;
        .animation-menu-item {
            padding: 8px 12px;
            color: #333;
            font-size: 14px;
            margin: 4px;
            &.active {
                color: #0099ff;
                border-radius: 4px;
                background: #eff4fc;
            }
        }
    }
}
</style>